<template>
  <div class="uploadImg">
    <div class="tips">为保障账户及资金安全，请填写真实有效的身份信息</div>
    <div class="uploadimg">
      <div class="left same">
        <div v-show="sfzload=='LOADING'">
          <div class="identity loadTb"></div>
          <span>身份证姓名(校验)</span>
        </div>
        <div v-show="sfzload=='AFTERLOAD'">
          <div class="identity">
            <img :src="sfzimg" alt="" style="width:100%;height:100%;">
          </div>
          <span>身份证姓名(校验)</span>
        </div>
        <van-uploader capture="user" multiple v-show="sfzload=='BEFORELOAD'" :max-count="1" :after-read="afterReadSfz"
                      :before-read="beforeReadSfz">
          <div class="identity zm"></div>
          <span>身份证姓名(校验)</span>
        </van-uploader>
      </div>
      <div class="right same">
        <div v-show="tbload=='LOADING'">
          <div class="identity loadTb"></div>
          <span>淘宝淘气值</span>
        </div>
        <div v-show="tbload=='AFTERLOAD'">
          <div class="identity">
            <img :src="tbimg" alt="" style="width:100%;height:100%;">
          </div>
          <span>淘宝淘气值</span>
        </div>
        <van-uploader v-show="tbload=='BEFORELOAD'" :max-count="1" :after-read="afterReadTb"
                      :before-read="beforeReadTb">
          <div class="identity bm"></div>
          <span>淘宝淘气值</span>
        </van-uploader>
      </div>
    </div>
    <div style="display:flex;align-items: center;justify-content: center;flex-direction:column;width:90%;margin:20px auto;">
      <p style="color:red;font-size:18px;font-weight:600;">支付宝提现实名必须和身份证上的名字一致</p>
      <p style="color:red;font-size:18px;font-weight:600;">微信提现实名必须和身份证上的名字一致</p>
      <p style="color:red;font-size:18px;font-weight:600;">否则不可提现</p>
    </div>
    <div class="content">
      <!-- <van-field v-model="usernumber" label="身份证号" placeholder="请拍照识别身份证号"/> -->
      <van-field v-model.trim="userzfb" label="支付宝帐号" placeholder="支付宝号务必写对以便于收款"/>
      <van-field readonly clickable name="picker" :value="userjob" label="职业" placeholder="请选择职业"
                 @click="showPicker = true"/>
      <van-popup v-model.trim="showPicker" position="bottom">
        <van-picker show-toolbar :columns="columns" @confirm="onJobs" @cancel="showPicker = false"/>
      </van-popup>
      <van-field v-model.trim="usertbname" label="旺旺号" placeholder="请输入旺旺号"/>
      <van-field v-model.trim="usernaughty" type="digit" label="淘宝淘气值" placeholder="请输入淘宝淘气值"/>
      <van-field v-model.trim="username" label="姓名" placeholder="校验获取"/>
      <van-field v-model.trim="Sex" label="性别" placeholder="校验获取"/>
      <van-field v-model.trim="usernumber" disabled center clearable label="身份证号" placeholder="校验获取">
        <template #button>
          <van-button :loading="btnload" slot="button" size="small" type="info" @click="onCheck">校验</van-button>
        </template>
      </van-field>
      <van-field v-model.trim="userbirth" readonly label="身份证生日" placeholder="校验获取"/>
      <van-field v-model.trim="useraddress" readonly label="身份证地址" placeholder="校验获取"/>
      <!--      <van-field v-model="usercode" label="邀请码" placeholder="请输入邀请码"/>-->
      <van-field v-model="userpass" type="password" label="操作密码" placeholder="操作密码(涉及金钱等)"/>
      <!--      <van-field v-model="userphone" type="tel" label="手机号" placeholder="请输入手机号"/>-->
      <!--      <van-field v-model="usersms" center clearable label="短信验证码" placeholder="请输入短信验证码">-->
      <!--        <van-button slot="button" size="small" type="info" :disabled="disabled" @click="onMessage">{{ btnTitle }}-->
      <!--        </van-button>-->
      <!--      </van-field>-->
      <div class="submit">
        <van-button type="primary" block @click="onSubmit" color="#4b7ee9">提交</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import {imagerecognition, perfectuserinfo, sendcode, idcode_Info} from '../api/api';
import aestool from '@/utils/aestool.js';
import axios from 'axios';
export default {
  data() {
    return {
      username: '',
      usernumber: '',
      Sex: "",
      userbirth: '',
      useraddress: '',
      userzfb: '',
      userphone: '',
      usersms: '',
      userjob: '',
      usertbname: '',
      usercode: '',
      usernaughty: '',
      userpass: '',
      sfzload: 'BEFORELOAD',
      tbload: 'BEFORELOAD',
      sfzimg: '',
      tbimg: '',
      btnTitle: "获取验证码",
      disabled: false,
      columns: ['学生', '自由职业', '待业', '家庭主妇', '工薪族', '务农', '管理人才', '技术人才', '工人', '宝妈', '销售', '客服', '工程', '个体户', '会计', '文员', '检验员', '其他'],
      showPicker: false,
      btnload: false,
    }
  },
  // created(){
  //   var a = aestool.encrypt('欢迎登陆','qwe1asd2zxc3')
  //   var b = aestool.decrypt(a,'qwe1asd2zxc3')
  //   console.log('加密后',a)
  //   console.log('解密后',b)
  // },
  methods: {
    onJobs(value) {
      this.userjob = value;
      this.showPicker = false;
    },
    //身份证校验
    onCheck() {
      if (this.username == '') {
        this.$toast('姓名不能为空！')
      } else if (this.usernumber == '') {
        this.$toast('身份证号不能为空！')
      } else {
        this.btnload = true
        let params = {
          username: aestool.encrypt(this.username, 'IdcodeInfo265506'),
          card_number: aestool.encrypt(this.usernumber, 'IdcodeInfo265506')
        }
        idcode_Info(params).then(res => {
          console.log('校验', res)
          this.btnload = false
          if (res.Status == 200) {
            this.userbirth = res.Data.birthday
            this.useraddress = res.Data.area
          }
        })
      }
    },
    //身份证上传之前
    beforeReadSfz(file) {
      console.log('file', file)
      if (file.type.indexOf("image") == -1) {
        this.$toast('请上传正确的图片格式');
        return false;
      }
      return true;
    },
    //淘宝值上传之前
    beforeReadTb(file) {
      if (file.type.indexOf("image") == -1) {
        this.$toast('请上传正确的图片格式');
        return false;
      }
      return true;
    },
    //身份证上传
    afterReadSfz(file) {
      this.sfzload = 'LOADING'
      this.uploadsfz(file.file)
    },
    //淘宝值上传
    afterReadTb(file) {
      this.tbload = 'LOADING'
      this.uploadtb(file.file)
    },
    uploadsfz(file) {
      let params = new FormData()
      params.append('file', file)
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      return new Promise((resolve, reject) => {
        axios.post('api/v1/register/imagerecognition', params, config).then(res => {
          this.sfzload = 'AFTERLOAD'
          console.log('身份证', res)
          if (res.data.Status == 200) {
            this.$toast('上传成功')
            this.sfzimg = res.data.UrlImg
            this.username = res.data.Data.response.Name
            this.usernumber = res.data.Data.response.IdNum
            this.userbirth = res.data.Data.response.Birth
            this.useraddress = res.data.Data.response.Address
            this.Sex = res.data.Data.response.Sex
          } else {
            this.$toast(res.data.Message)
            this.sfzload = 'BEFORELOAD'
          }
        })
      })
    },
    uploadtb(file) {
      let params = new FormData()
      params.append('file', file)
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      return new Promise((resolve, reject) => {
        axios.post('api/v1/register/tbimageRecognition', params, config).then(res => {
          console.log('上传', res)
          this.tbload = 'AFTERLOAD'
          if (res.data.Status == 200) {
            this.$toast('上传成功')
            this.tbimg = res.data.UrlImg
            console.log('this.tbimg', this.tbimg)
          } else {
            this.$toast(res.data.Message)
            this.tbload = 'BEFORELOAD'
          }
        })
      })
    },
    onSubmit() {
      if (this.username == '') {
        this.$toast('姓名不能为空！')
      } else if (this.usernumber == '') {
        this.$toast('身份证号不能为空！')
      } else if (this.userbirth == '') {
        this.$toast('身份证生日不能为空！')
      } else if (this.useraddress == '') {
        this.$toast('身份证地址不能为空！')
      } else if (this.userzfb == '') {
        this.$toast('支付宝账号不能为空！')
      } else if (this.userjob == '') {
        this.$toast('职业不能为空！')
      } else if (this.usertbname == '') {
        this.$toast('旺旺不能为空！')
      } else if (this.usernaughty == '') {
        this.$toast('淘气值不能为空！')
      } else if (this.sfzimg == '') {
        this.$toast('身份证图片不能为空！')
      } else if (this.tbzimg == '') {
        this.$toast('淘宝淘气值图片不能为空！')
      } else {
        if (this.Sex == '男') {
          this.Sex = 1
        } else {
          this.Sex = 2
        }
        console.log(this.Sex);
        let params = {
          Alpay: this.userzfb,
          Jobs: this.userjob,
          t_name: this.username,
          Idcard: this.usernumber,
          taobao_name: this.usertbname,
          birth: this.userbirth,
          address: this.useraddress,
          tb_value: Number(this.usernaughty),
          idcode_img: this.sfzimg,
          last_code: '1',
          tb_img: this.tbimg,
          sex: this.Sex
        }
        perfectuserinfo(params).then(res => {
          console.log('提交', res)
          if (res.Status == 200) {
            this.$toast('提交成功！')
            this.$router.push('/mine')
          } else {
            this.$toast(res.Message)
          }
        })
      }
    },
    //发送验证码
    onMessage() {
      //判断输入的手机号是否合法
      if (!this.userphone) {
        this.$toast("手机号码不能为空")
      } else if (!/^1[3456789]\d{9}$/.test(this.userphone)) {
        this.$toast("请输入正确的手机号")
      } else {
        //倒计时
        let time = 60;
        let timer = setInterval(() => {
          if (time == 0) {
            clearInterval(timer);
            this.disabled = false;
            this.btnTitle = "获取验证码";
          } else {
            this.btnTitle = time + '秒后重试';
            this.disabled = true;
            time--
          }
        }, 1000)
        let params = {
          phone: aestool.encrypt(this.userphone, '123456asdzxcqwe0')
        }
        sendcode(params).then(res => {
          console.log('验证码', res)
          if (res.Status == 200) {
            this.$toast('发送成功！')
          } else {
            this.$toast(res.Message)
          }
        })
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
.uploadImg {
  height 100%
  font-size 12px

  .identity {
    width 100%
    height 120px
    margin-bottom 10px
  }

  .loadTb {
    background url(../assets/img/loading.gif) no-repeat top center
    background-size cover
  }

  .zm {
    background url(../../static/img/sfz_1.jpg) no-repeat top center
    background-size cover
  }

  .bm {
    background url(../../static/img/tqz.jpg) no-repeat top center
    background-size cover
  }

  .uploadimg {
    display flex
    justify-content space-around
    align-items center
    padding 20px 0
    background #f4f4f4

    .same {
      width 46%
      text-align center
      font-size 16px
      color #656565
    }
  }

  .tips {
    background #fcfbe9
    line-height 32px
    text-align center
    font-size 14px
    color #33322e
  }

  .submit {
    margin: 18px;
  }
}
</style>
<style lang="stylus">
.uploadImg
  width 100%

  .van-uploader
    width 100%

    .van-uploader__input-wrapper
      width 100%

</style>

